<template>
    <div id="UserList">
        <!-- title -->
        <div class="title">
            <bread-crumb>{{ title }}</bread-crumb>
            <div class="btn">
                <!-- <el-button size="mini" type="success" @click="addBanner">添加信息分类</el-button> -->
            </div>
        </div>

        <!-- table -->
        <div class="table">
              <el-form :model="FormData" label-width="100px">
                  <el-form-item label="ID" v-if="type == 2">
                      <el-input v-model="FormData._id" disabled ></el-input>
                  </el-form-item>

                  <el-form-item label="分类" >
                      <el-select v-model="FormData.itemClass">
                          <el-option v-for="item in select" :key="item._id" :value="item._id" :label="item.name" ></el-option>
                      </el-select>
                  </el-form-item>

                  <el-form-item label="标题" >
                      <el-input v-model="FormData.title"  ></el-input>
                  </el-form-item>
                  
                  <el-form-item label="内容" >
                      <vue-ueditor-wrap v-model="FormData.content" :config="myConfig"></vue-ueditor-wrap>
                  </el-form-item>


                  <el-form-item label="分类" >
                      <el-select v-model="FormData.status">
                          <el-option v-for="item in statusOptions" :key="item.value" :value="item.value" :label="item.label" ></el-option>
                      </el-select>
                  </el-form-item>

                    <el-form-item>
                        <div class="btnbox">
                            <el-button @click="cancel">取消</el-button>
                            <el-button type="primary" @click="subData">确定</el-button>
                        </div>
                    </el-form-item>

              </el-form>
        </div>
    </div>
</template>

<script>
    import BreadCrumb from "@/components/index/BreadCrumb"
    import VueUeditorWrap from 'vue-ueditor-wrap'
    export default {
        components: {
            BreadCrumb,
            VueUeditorWrap
        },
        data() {
            return {
                tableData: [],
                DialogData: {
                    title: "",
                    show: false
                },
                statusOptions: [
                    { value: "1", label: "显示" },
                    { value: "2", label: "隐藏" },
                ],
                FormData: {},
                title: "",
                type: "1",
                select: [],
                myConfig: {
                    // 编辑器不自动被内容撑高
                    autoHeightEnabled: false,
                    // 初始容器高度
                    initialFrameHeight: 400,
                    // 初始容器宽度
                    initialFrameWidth: '100%',
                    // 上传文件接口（这个地址是我为了方便各位体验文件上传功能搭建的临时接口，请勿在生产环境使用！！！）
                    serverUrl: 'http://35.201.165.105:8000/controller.php',
                    // UEditor 资源文件的存放路径，如果你使用的是 vue-cli 生成的项目，通常不需要设置该选项，vue-ueditor-wrap 会自动处理常见的情况，如果需要特殊配置，参考下方的常见问题2
                    UEDITOR_HOME_URL: '/UEditor/'
                },
                id: ""
            }
        },
        created () {
            let type = this.$route.params.type;
            console.log(type);
            
            if (type == "add") {
                this.title = "添加信息"
                this.type = "1"
            } else{ 
                this.title = "修改信息"
                this.type = "2"
                this.id = type
                this.getInfoByID()
            }
        },
        mounted () {
            this.getInfoClassList( );
        },
        methods: {
            // 获取所有信息分类 -select
            async getInfoClassList(  ) {
                let res = await this.$axios.post("/admin/getInfoClassSelect")
                //  console.log(res);
                let code = res.data.code 
                if (code == 200) {
                    this.select = res.data.data 
                }
            },

            //  取消
             cancel() {
                 this.$router.push("/infolist")
             },

            //   检查数据

            checkData() {
                let { title, content } =this.FormData
                if (!title) {
                    this.$message.error("请输入标题")
                    return  false
                } else if (!content) {
                    this.$message.error("请输入内容")
                    return  false
                } else {
                    return true
                }
            },

            // 提交数据

            async subData() {
                let isReady = this.checkData()
                if (isReady) {
                    let res = await this.$axios.post("/admin/addInfoList", this.FormData)
                    let code = res.data.code 
                    if (code == 204) {
                        this.$message.success("更新成功")
                        this.$router.push("/infolist")
                    } else {
                        this.$message.error("更新失败,请重试")
                    }
                }
            },

            // 根据id 查文章
            async getInfoByID() {
                let res = await this.$axios.post("/admin/getInfoByID",{ id: this.id })
                // console.log(res);
                
                let code = res.data.code 
                if (code == 200) {
                    this.FormData = res.data.data
                }
            },
            
        },
    }
</script>

<style lang="scss" scoped>
 #UserList {
     width: 100%;
     box-sizing: border-box;
     .title {
         width: 100%;
         display: flex;
         align-items: center;
         border-bottom: 1px solid #f5f5f5;
         .btn {
             width: 300px;
         }
     }
     .avatar {
         width: 30px;
         height: 30px;
     }
     .page {
         width: 100%;
         text-align: center;
     }
     .btnbox {
         text-align: center;
     }
 }
</style>